<template>
	<view class="car-wash-page" :class="{ 'no-scroll': showOrderModal }">
		<!-- 导航栏 -->
		<uni-nav-bar 
			:fixed="true" 
			:status-bar="true" 
			title="洗车" 
			left-icon="left" 
			background-color="#007AFF"
			color="#ffffff"
			:border="false"
			:shadow="false"
			@clickLeft="goBack">
		</uni-nav-bar>

		<!-- 导航栏下容器 -->
		<view class="nav-container"></view>

		<view class="content">
			<!-- 门店信息卡片（包含图片和介绍） -->
			<view class="store-info-card">
				<uni-card :is-shadow="true" :is-full="false" spacing="0" padding="0">
					<!-- 门店大图 -->
					<view class="store-banner">
						<image src="/static/mdtp.png" mode="aspectFill" class="banner-image"></image>
					</view>
					
					<!-- 门店信息 -->
					<view class="store-info-content">
						<view class="store-name">{{ storeInfo.name }}</view>
						
						<view class="store-rating-sales">
							<view class="store-rating-stars">
								<image 
									v-for="index in storeInfo.rating" 
									:key="index"
									src="/static/五星 拷贝@2x.png" 
									mode="aspectFit" 
									class="star-icon">
								</image>
							</view>
							<text class="rating-text">{{ storeInfo.rating }}分</text>
							<text class="sales-text">销量:{{ storeInfo.sales }}</text>
						</view>
						
						<view class="store-detail-item">
							<text class="detail-label">营业时间:</text>
							<text class="detail-value">{{ storeInfo.businessHours }}</text>
						</view>
						
						<view class="store-detail-item">
							<text class="detail-label">位置:</text>
							<text class="detail-value">{{ storeInfo.location }}</text>
							<uni-icons type="paperplane-filled" color="#007AFF" size="16" class="location-icon" @click="handleLocation"></uni-icons>
						</view>
					</view>
				</uni-card>
			</view>

			<!-- 服务项目卡片 -->
			<view class="service-card">
				<uni-card :is-shadow="true" :is-full="false" spacing="0" padding="0">
					<view class="service-content">
						<view class="section-title">服务项目</view>
						
						<view class="service-item" :class="{ 'service-item-selected': selectedServices.includes(index) }" v-for="(item, index) in serviceList" :key="index" @click="selectService(index)">
							<view class="service-radio">
								<view class="radio-circle" :class="{ 'radio-selected': selectedServices.includes(index) }">
									<view v-if="selectedServices.includes(index)" class="radio-dot"></view>
								</view>
							</view>
							<view class="service-info">
								<view class="service-title-row">
									<text class="service-title">{{ item.title }}</text>
									<view class="service-price">
										<text class="current-price">¥{{ item.price }}</text>
										<text class="original-price">¥{{ item.originalPrice }}</text>
									</view>
								</view>
								<text class="service-desc">{{ item.description }}</text>
							</view>
						</view>
					</view>
				</uni-card>
			</view>

			<!-- 服务评价卡片 -->
			<view class="review-card">
				<uni-card :is-shadow="true" :is-full="false" spacing="0" padding="0">
					<view class="review-content">
						<view class="section-title">服务评价</view>
						
						<view class="review-item" v-for="(review, index) in reviewList" :key="index">
							<image :src="review.avatar" mode="aspectFill" class="review-avatar"></image>
							<view class="review-info">
								<view class="review-header">
									<text class="review-username">{{ review.username }}</text>
									<text class="review-date">{{ review.date }}</text>
								</view>
								<view class="review-rating">
									<image 
										v-for="starIndex in review.rating" 
										:key="starIndex"
										src="/static/五星 拷贝@2x.png" 
										mode="aspectFit" 
										class="review-star-icon">
									</image>
								</view>
								<text class="review-text">{{ review.text }}</text>
							</view>
						</view>
					</view>
				</uni-card>
			</view>

			<!-- 底部固定栏 -->
			<view class="footer-bar">
				<view class="footer-btn cart-btn" @click="handleCart">
					<text class="btn-text">购物车({{ cartCount }})</text>
				</view>
				<view class="footer-btn confirm-btn" @click="handleConfirm">
					<text class="btn-text">确认已选服务</text>
				</view>
			</view>
		</view>
		
		<!-- 服务订单弹窗 -->
		<view class="modal-overlay" v-if="showOrderModal" @click="closeOrderModal" @touchmove.prevent.stop catchtouchmove>
			<view class="modal-content" @click.stop @touchmove.stop>
				<!-- 弹窗头部 -->
				<view class="modal-header">
					<text class="modal-title">服务订单</text>
					<view class="modal-close" @click.stop="closeOrderModal">
						<uni-icons type="closeempty" size="20" color="#666666"></uni-icons>
					</view>
				</view>
				
				<!-- 服务列表 -->
				<scroll-view class="modal-body" scroll-y>
					<view class="order-service-item" v-for="(index) in modalServiceList" :key="index" @click="toggleServiceInModal(index)">
						<view class="order-checkbox" :class="{ 'checked': modalSelectedServices[index] }">
							<uni-icons v-if="modalSelectedServices[index]" type="checkmarkempty" size="14" color="#ffffff"></uni-icons>
						</view>
						<view class="order-service-info">
							<text class="order-service-name">{{ serviceList[index].title }}</text>
						</view>
						<view class="order-service-price-wrapper">
							<text class="order-service-price">¥{{ serviceList[index].price }}</text>
						</view>
					</view>
				</scroll-view>
				
				<!-- 弹窗底部 -->
				<view class="modal-footer">
					<view class="total-amount">
						<text class="total-text">合计:¥{{ totalAmount }}</text>
					</view>
					<view class="confirm-order-btn" @click="confirmOrderFromModal">
						<text class="confirm-order-text">确认已选服务</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, watch, onUnmounted } from 'vue'
	
	const storeInfo = ref({
		name: '大美汽车保养厂(解放路店)',
		rating: 4,
		sales: 556,
		businessHours: '周一至周五 早上8:00-晚上22:00',
		location: '山阳区人民路与解放路交叉口'
	})
	
	const serviceList = ref([
		{
			title: '小保养套餐 (合成机油+机滤)',
			price: '35.9',
			originalPrice: '60',
			description: '这里是精洗服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍'
		},
		{
			title: '小保养套餐2 (合成机油+机滤)',
			price: '35.9',
			originalPrice: '60',
			description: '这里是精洗服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍'
		},
		{
			title: '小保养套餐3 (合成机油)',
			price: '35.9',
			originalPrice: '60',
			description: '这里是精洗服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍'
		}
	])
	
	const reviewList = ref([
		{
			username: '黄**',
			rating: 5,
			date: '2022-12-31',
			text: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐来这家店洗车!!!',
			avatar: '/static/tx1.jpg'
		},
		{
			username: '黄**',
			rating: 5,
			date: '2022-12-31',
			text: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐来这家店洗车!!!',
			avatar: '/static/tx1.jpg'
		},
		{
			username: '黄**',
			rating: 5,
			date: '2022-12-31',
			text: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐来这家店洗车!!!',
			avatar: '/static/tx1.jpg'
		}
	])
	
	const selectedServices = ref([1, 2]) // 默认选中第二个和第三个
	const showOrderModal = ref(false)
	const modalSelectedServices = ref({}) // 弹出框中的选中状态
	const modalServiceList = ref([]) // 弹出框中显示的服务列表
	
	// 记录滚动位置
	const scrollTop = ref(0)
	
	// 计算购物车数量
	const cartCount = computed(() => {
		return selectedServices.value.length
	})
	
	// 计算总金额（基于弹出框中的选中状态）
	const totalAmount = computed(() => {
		let total = 0
		modalServiceList.value.forEach(index => {
			if (modalSelectedServices.value[index]) {
				total += parseFloat(serviceList.value[index].price)
			}
		})
		return total.toFixed(2)
	})
	
	const goBack = () => {
		uni.navigateBack()
	}
	
	const handleLocation = () => {
		uni.showToast({
			title: '导航',
			icon: 'none'
		})
	}
	
	const selectService = (index) => {
		const selectedIndex = selectedServices.value.indexOf(index)
		if (selectedIndex > -1) {
			selectedServices.value.splice(selectedIndex, 1)
		} else {
			selectedServices.value.push(index)
		}
	}
	
	const handleCart = () => {
		if (selectedServices.value.length === 0) {
			uni.showToast({
				title: '购物车为空',
				icon: 'none'
			})
			return
		}
		// 初始化弹出框：显示所有已选中的服务，默认全部选中
		modalServiceList.value = [...selectedServices.value]
		const initialSelected = {}
		selectedServices.value.forEach(index => {
			initialSelected[index] = true
		})
		modalSelectedServices.value = initialSelected
		showOrderModal.value = true
	}
	
	const closeOrderModal = () => {
		modalServiceList.value = []
		modalSelectedServices.value = {}
		showOrderModal.value = false
	}
	
	// 监听弹窗状态，控制页面滚动
	watch(showOrderModal, (newVal) => {
		if (newVal) {
			// 弹窗显示时，记录当前滚动位置并禁用滚动
			// #ifdef H5
			scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop
			document.body.style.overflow = 'hidden'
			document.body.style.position = 'fixed'
			document.body.style.width = '100%'
			document.body.style.top = `-${scrollTop.value}px`
			// #endif
		} else {
			// 弹窗关闭时，恢复滚动
			// #ifdef H5
			document.body.style.overflow = ''
			document.body.style.position = ''
			document.body.style.width = ''
			document.body.style.top = ''
			// 使用 setTimeout 确保样式恢复后再设置滚动位置
			setTimeout(() => {
				document.documentElement.scrollTop = scrollTop.value
				document.body.scrollTop = scrollTop.value
			}, 0)
			// #endif
		}
	})
	
	// 组件卸载时恢复滚动
	onUnmounted(() => {
		// #ifdef H5
		if (showOrderModal.value) {
			document.body.style.overflow = ''
			document.body.style.position = ''
			document.body.style.width = ''
			document.body.style.top = ''
		}
		// #endif
	})
	
	const toggleServiceInModal = (index) => {
		// 切换选中状态
		modalSelectedServices.value[index] = !modalSelectedServices.value[index]
	}
	
	const confirmOrderFromModal = () => {
		// 更新 selectedServices，只保留弹出框中选中状态的服务
		const newSelected = modalServiceList.value.filter(index => modalSelectedServices.value[index])
		if (newSelected.length === 0) {
			uni.showToast({
				title: '请至少选择一个服务项目',
				icon: 'none'
			})
			return
		}
		selectedServices.value = newSelected
		closeOrderModal()
		uni.showToast({
			title: '确认已选服务',
			icon: 'success'
		})
	}
	
	const handleConfirm = () => {
		if (selectedServices.value.length === 0) {
			uni.showToast({
				title: '请选择服务项目',
				icon: 'none'
			})
			return
		}
		uni.showToast({
			title: '确认已选服务',
			icon: 'success'
		})
	}
</script>

<style lang="scss" scoped>
	.car-wash-page {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 80px;
	}
	
	.car-wash-page.no-scroll {
		overflow: hidden !important;
		height: 100vh;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
	}

	.nav-container {
		height: 150px;
		background-color: #007AFF;
		width: 100%;
	}

	.content {
		padding-top: 0;
		margin-top: -150px;
	}

	.store-info-card {
		margin: 15px 0;
		position: relative;
		z-index: 1;
	}

	.store-banner {
		width: 92%;
		height: 200px;
		overflow: hidden;
		border-radius: 8px;
		margin: 15px auto;
	}

	.banner-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.store-info-content {
		padding: 15px;
	}

	.store-name {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 12px;
	}

	.store-rating-sales {
		display: flex;
		align-items: center;
		margin-bottom: 12px;
		flex-wrap: nowrap;
	}

	.store-rating-stars {
		display: flex;
		align-items: center;
		margin-right: 4px;
	}

	.star-icon {
		width: 14px;
		height: 14px;
		margin-right: 2px;
	}

	.rating-text {
		font-size: 12px;
		color: #666666;
		margin-left: 4px;
		margin-right: 8px;
	}

	.sales-text {
		font-size: 12px;
		color: #666666;
		margin-left: 0;
	}

	.store-detail-item {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		font-size: 12px;
	}

	.detail-label {
		color: #999999;
		margin-right: 8px;
	}

	.detail-value {
		color: #333333;
		margin-right: 4px;
	}

	.location-icon {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
	}

	.service-card,
	.review-card {
		margin: 0 0 15px 0;
	}

	.service-content,
	.review-content {
		padding: 15px;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 15px;
	}

	.service-item {
		display: flex;
		padding: 15px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.service-item:last-child {
		border-bottom: none;
	}

	.service-radio {
		margin-right: 12px;
		display: flex;
		align-items: flex-start;
		padding-top: 2px;
	}

	.radio-circle {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		border: 2px solid #d0d0d0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.radio-selected {
		border-color: #007AFF;
		background-color: #007AFF;
	}

	.radio-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #ffffff;
	}

	.service-info {
		flex: 1;
	}

	.service-title-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8px;
		flex-wrap: wrap;
	}

	.service-title {
		font-size: 14px;
		color: #333333;
		font-weight: bold;
		line-height: 20px;
	}

	.service-item-selected .service-title {
		color: #007AFF;
	}

	.service-price {
		display: flex;
		align-items: center;
		margin-left: auto;
	}

	.current-price {
		font-size: 16px;
		color: #ff6600;
		font-weight: bold;
		margin-right: 8px;
	}

	.original-price {
		font-size: 12px;
		color: #999999;
		text-decoration: line-through;
	}

	.service-desc {
		font-size: 12px;
		color: #333333;
		line-height: 18px;
	}

	.review-item {
		display: flex;
		padding: 15px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.review-item:last-child {
		border-bottom: none;
	}

	.review-avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 12px;
		flex-shrink: 0;
		background-color: #f0f0f0;
	}

	.review-info {
		flex: 1;
	}

	.review-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8px;
	}

	.review-username {
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.review-rating {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.review-star-icon {
		width: 12px;
		height: 12px;
		margin-right: 2px;
	}

	.review-date {
		font-size: 12px;
		color: #999999;
	}

	.review-text {
		font-size: 12px;
		color: #333333;
		line-height: 18px;
	}

	.footer-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		background-color: #ffffff;
		padding: 10px 15px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom));
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		z-index: 999;
	}

	.footer-btn {
		flex: 1;
		height: 44px;
		border-radius: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 5px;
	}

	.cart-btn {
		background-color: #007AFF;
	}

	.confirm-btn {
		background-color: #ff6600;
	}

	.btn-text {
		font-size: 14px;
		color: #ffffff;
		font-weight: 500;
	}

	/* 服务订单弹窗样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		width: 100%;
		max-height: 75vh;
		background-color: #ffffff;
		border-radius: 20px 20px 0 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18px 20px;
		border-bottom: 1px solid #f0f0f0;
		flex-shrink: 0;
	}

	.modal-title {
		font-size: 17px;
		font-weight: bold;
		color: #333333;
	}

	.modal-close {
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #f5f5f5;
		z-index: 10;
		pointer-events: auto;
		cursor: pointer;
	}

	.modal-body {
		flex: 1;
		max-height: calc(75vh - 140px);
		padding: 10px 20px;
		overflow-y: auto;
		box-sizing: border-box;
		width: 100%;
	}

	.order-service-item {
		display: flex;
		align-items: flex-start;
		padding: 16px 0;
		border-bottom: 1px solid #f0f0f0;
		width: 100%;
		box-sizing: border-box;
		cursor: pointer;
	}

	.order-service-item:last-child {
		border-bottom: none;
	}

	.order-checkbox {
		width: 20px;
		height: 20px;
		border: 2px solid #d0d0d0;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
		margin-top: 2px;
		flex-shrink: 0;
		background-color: #ffffff;
	}

	.order-checkbox.checked {
		background-color: #007AFF;
		border-color: #007AFF;
	}

	.order-service-info {
		flex: 1;
		min-width: 0;
		margin-right: 12px;
	}

	.order-service-name {
		display: block;
		font-size: 15px;
		color: #333333;
		line-height: 1.5;
		word-break: break-all;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.order-service-price-wrapper {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		min-width: 80px;
	}

	.order-service-price {
		font-size: 15px;
		color: #333333;
		font-weight: 600;
		white-space: nowrap;
		display: block;
	}

	.modal-footer {
		display: flex;
		align-items: center;
		padding: 16px 20px;
		border-top: 1px solid #f0f0f0;
		background-color: #ffffff;
		flex-shrink: 0;
		padding-bottom: calc(16px + env(safe-area-inset-bottom));
		gap: 12px;
	}

	.total-amount {
		flex: 1;
		background: linear-gradient(to right, #ffd700, #ffa500);
		padding: 14px 18px;
		border-radius: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
	}

	.total-text {
		font-size: 15px;
		color: #ffffff;
		font-weight: bold;
	}

	.confirm-order-btn {
		flex: 1;
		background: linear-gradient(to right, #ff6600, #ff4500);
		padding: 14px 18px;
		border-radius: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
	}

	.confirm-order-text {
		font-size: 15px;
		color: #ffffff;
		font-weight: bold;
		white-space: nowrap;
	}
</style>

<style lang="scss">
	/* 全局样式，用于覆盖组件内部样式 */
	.uni-navbar__content {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar--border {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar__header {
		border-bottom: none !important;
		border: none !important;
	}
	
	/* 卡片圆角样式 */
	.store-info-card .uni-card,
	.service-card .uni-card,
	.review-card .uni-card {
		border-radius: 10px !important;
		padding: 0 !important;
	}
	
	/* 覆盖 uni-card 内部默认间距 */
	.store-info-card .uni-card,
	.service-card .uni-card,
	.review-card .uni-card {
		.uni-card__content {
			padding: 0 !important;
		}
	}
</style>

